<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学校智能服务大厅 - 叫号机终端</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1a56a7;
            --primary-light: #e6f0ff;
            --secondary-color: #ff6b35;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --dark-color: #343a40;
            --light-color: #f8f9fa;
            --border-radius: 10px;
            --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', 'Microsoft YaHei', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 768px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            min-height: 100vh;
            box-shadow: var(--box-shadow);
        }
        
        header {
            background: linear-gradient(135deg, var(--primary-color), #0d47a1);
            color: white;
            padding: 20px 0;
            text-align: center;
            margin-bottom: 20px;
            border-radius: var(--border-radius);
            position: relative;
            overflow: hidden;
        }
        
        header::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 5px;
            font-weight: 700;
        }
        
        .subtitle {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .login-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 30px 0;
        }
        
        .login-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 10px;
            background-color: var(--primary-light);
            border: 2px solid var(--primary-color);
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            color: var(--primary-color);
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }
        
        .login-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: var(--transition);
        }
        
        .login-btn:hover {
            background-color: var(--primary-color);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }
        
        .login-btn:hover::before {
            left: 100%;
        }
        
        .login-btn i {
            font-size: 36px;
            margin-bottom: 10px;
        }
        
        .footer {
            margin-top: 30px;
            text-align: center;
            font-size: 12px;
            color: #666;
            padding: 10px;
            border-top: 1px solid #eee;
        }
        
        /* 部门选择页样式 */
        .department-list {
            margin-top: 20px;
        }
        
        .department-item {
            padding: 15px;
            border-radius: var(--border-radius);
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: var(--transition);
            background-color: white;
            box-shadow: var(--box-shadow);
            border-left: 4px solid var(--primary-color);
        }
        
        .department-item:hover {
            transform: translateX(5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        
        .waiting-number {
            background-color: var(--primary-color);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            min-width: 80px;
            text-align: center;
        }
        
        .waiting-number.low {
            background-color: var(--success-color);
        }
        
        .waiting-number.medium {
            background-color: var(--warning-color);
            color: var(--dark-color);
        }
        
        .waiting-number.high {
            background-color: var(--danger-color);
        }
        
        /* 取号成功页样式 */
        .ticket {
            background-color: #fff;
            border: 2px dashed var(--primary-color);
            border-radius: var(--border-radius);
            padding: 25px;
            margin: 30px auto;
            max-width: 400px;
            text-align: center;
            box-shadow: var(--box-shadow);
            position: relative;
            overflow: hidden;
        }
        
        .ticket::before, .ticket::after {
            content: "••••••••••••••••••••••••••••••••••••••••";
            position: absolute;
            left: 0;
            right: 0;
            color: var(--primary-color);
            font-size: 12px;
            letter-spacing: 2px;
            line-height: 0;
            opacity: 0.3;
        }
        
        .ticket::before {
            top: 0;
        }
        
        .ticket::after {
            bottom: 0;
        }
        
        .ticket h2 {
            color: var(--primary-color);
            margin-bottom: 20px;
            font-size: 22px;
        }
        
        .ticket-info {
            margin: 20px 0;
            text-align: left;
            padding: 0 15px;
        }
        
        .ticket-info div {
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dashed #eee;
            padding-bottom: 5px;
        }
        
        .ticket-info strong {
            color: var(--primary-color);
        }
        
        .btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            box-shadow: 0 3px 5px rgba(0,0,0,0.1);
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        }
        
        .btn i {
            margin-right: 8px;
        }
        
        .btn-secondary {
            background-color: var(--dark-color);
        }
        
        .btn-danger {
            background-color: var(--danger-color);
        }
        
        .btn-success {
            background-color: var(--success-color);
        }
        
        /* 临时建档页样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--primary-color);
        }
        
        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 16px;
            transition: var(--transition);
        }
        
        .form-group input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(26, 86, 167, 0.2);
            outline: none;
        }
        
        .submit-btn {
            width: 100%;
            margin-top: 15px;
        }
        
        /* 黑名单提示页样式 */
        .warning-box {
            background-color: #fff3cd;
            border-left: 5px solid var(--warning-color);
            padding: 20px;
            margin: 30px 0;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        .warning-box h2 {
            color: #856404;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .warning-box h2 i {
            margin-right: 10px;
        }
        
        .back-btn {
            display: inline-flex;
            align-items: center;
            margin-top: 20px;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: bold;
            transition: var(--transition);
        }
        
        .back-btn:hover {
            color: #0d47a1;
        }
        
        .back-btn i {
            margin-right: 5px;
        }
        
        /* 排队信息页样式 */
        .queue-info {
            margin: 20px 0;
        }
        
        .current-number {
            background: linear-gradient(135deg, var(--primary-color), #0d47a1);
            color: white;
            padding: 20px;
            border-radius: var(--border-radius);
            text-align: center;
            margin-bottom: 25px;
            box-shadow: var(--box-shadow);
            position: relative;
            overflow: hidden;
        }
        
        .current-number::before {
            content: "";
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 200%;
            background: rgba(255,255,255,0.1);
            transform: rotate(30deg);
        }
        
        .current-number h2 {
            margin-bottom: 15px;
            font-size: 20px;
        }
        
        .current-number p {
            margin: 5px 0;
        }
        
        .current-number .number {
            font-size: 36px;
            font-weight: bold;
            margin: 10px 0;
            display: block;
        }
        
        .queue-list {
            margin-top: 20px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
        }
        
        .queue-item {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid #eee;
            transition: var(--transition);
        }
        
        .queue-item:last-child {
            border-bottom: none;
        }
        
        .queue-item.highlight {
            background-color: var(--primary-light);
            font-weight: bold;
        }
        
        .queue-item.highlight span:last-child {
            color: var(--primary-color);
        }
        
        /* 语音提示区域 */
        .voice-notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            z-index: 100;
            transition: var(--transition);
        }
        
        .voice-notification:hover {
            transform: scale(1.1);
        }
        
        .voice-notification.active {
            background-color: var(--danger-color);
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        /* 响应式调整 */
        @media (max-width: 576px) {
            .login-options {
                grid-template-columns: 1fr 1fr;
            }
            
            .container {
                padding: 10px;
            }
            
            h1 {
                font-size: 24px;
            }
        }
        
        /* 页面切换动画 */
        .page {
            display: none;
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .active {
            display: block;
        }
        
        /* 登录页面 */
        .login-page {
            max-width: 400px;
            margin: 0 auto;
            padding: 30px 20px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        .login-page h2 {
            text-align: center;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .login-logo {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-logo i {
            font-size: 50px;
            color: var(--primary-color);
        }
        
        /* 进度条 */
        .progress-container {
            width: 100%;
            height: 8px;
            background-color: #e9ecef;
            border-radius: 4px;
            margin: 15px 0;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), #0d47a1);
            width: 0%;
            transition: width 0.5s ease;
            border-radius: 4px;
        }
        
        /* 数字键盘 */
        .numpad-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 20px;
        }
        
        .numpad-btn {
            padding: 15px;
            font-size: 20px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            background-color: white;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
        }
        
        .numpad-btn:hover {
            background-color: var(--primary-light);
        }
        
        .numpad-display {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 20px;
            text-align: center;
            margin-bottom: 10px;
            background-color: #f8f9fa;
        }
        
        /* 语音提示弹窗 */
        .voice-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: var(--transition);
        }
        
        .voice-modal.active {
            opacity: 1;
            pointer-events: auto;
        }
        
        .voice-modal-content {
            background-color: white;
            padding: 25px;
            border-radius: var(--border-radius);
            max-width: 400px;
            width: 90%;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            transform: translateY(20px);
            transition: var(--transition);
        }
        
        .voice-modal.active .voice-modal-content {
            transform: translateY(0);
        }
        
        .voice-modal h3 {
            margin-bottom: 15px;
            color: var(--primary-color);
            display: flex;
            align-items: center;
        }
        
        .voice-modal h3 i {
            margin-right: 10px;
        }
        
        .voice-options {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        /* 动画效果 */
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .bounce {
            animation: bounce 1s infinite;
        }
    </style>
</head>
<body>
    <!-- 语音提示按钮 -->
    <div class="voice-notification" id="voice-btn" onclick="toggleVoiceModal()">
        <i class="fas fa-volume-up"></i>
    </div>
    
    <!-- 语音设置弹窗 -->
    <div class="voice-modal" id="voice-modal">
        <div class="voice-modal-content">
            <h3><i class="fas fa-volume-up"></i> 语音提示设置</h3>
            <p>您可以根据需要调整语音提示的音量和开关</p>
            
            <div class="form-group" style="margin-top: 20px;">
                <label for="voice-volume">音量大小</label>
                <input type="range" id="voice-volume" min="0" max="100" value="80">
            </div>
            
            <div class="form-group">
                <label style="display: flex; align-items: center; cursor: pointer;">
                    <input type="checkbox" id="voice-enabled" checked style="margin-right: 10px;">
                    启用语音提示
                </label>
            </div>
            
            <div class="voice-options">
                <button class="btn btn-secondary" onclick="closeVoiceModal()">
                    <i class="fas fa-times"></i> 关闭
                </button>
                <button class="btn" onclick="testVoice()">
                    <i class="fas fa-play"></i> 测试语音
                </button>
            </div>
        </div>
    </div>
    
    <!-- 首页/选择功能页 -->
    <div class="container">
        <div id="home-page" class="page active">
            <header>
                <h1>学校智能服务大厅</h1>
                <div class="subtitle">欢迎使用自助叫号系统</div>
            </header>
            
            <div class="login-options">
                <a href="#" class="login-btn" onclick="showDepartmentPage()">
                    <i class="fas fa-user-graduate"></i>
                    <span>学生业务办理</span>
                </a>
                
                <a href="#" class="login-btn" onclick="showDepartmentPage()">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <span>教师业务办理</span>
                </a>
                
                <a href="#" class="login-btn" onclick="showTempRegisterPage()">
                    <i class="fas fa-user-plus"></i>
                    <span>临时人员建档</span>
                </a>
                
                <a href="#" class="login-btn" onclick="showQueueInfo()">
                    <i class="fas fa-list-ol"></i>
                    <span>查看排队情况</span>
                </a>
            </div>
            
            <div class="footer">
                <p>技术支持：学校信息中心</p>
                <p>服务电话：1234-567890</p>
            </div>
        </div>
        
        <!-- 登录页面 (只在需要时显示) -->
        <div id="login-page" class="page">
            <div class="login-logo">
                <i class="fas fa-user-shield"></i>
            </div>
            
            <div class="login-page">
                <h2>请选择登录方式</h2>
                
                <div class="login-options">
                    <a href="#" class="login-btn" onclick="loginWithMethod('face')">
                        <i class="fas fa-user-circle"></i>
                        <span>人脸识别登录</span>
                    </a>
                    
                    <a href="#" class="login-btn" onclick="loginWithMethod('card')">
                        <i class="fas fa-id-card"></i>
                        <span>一卡通登录</span>
                    </a>
                    
                    <a href="#" class="login-btn" onclick="loginWithMethod('id')">
                        <i class="fas fa-address-card"></i>
                        <span>身份证登录</span>
                    </a>
                    
                    <a href="#" class="login-btn" onclick="loginWithMethod('auth')">
                        <i class="fas fa-key"></i>
                        <span>统一认证登录</span>
                    </a>
                </div>
                
                <div class="progress-container" id="login-progress" style="display: none;">
                    <div class="progress-bar" id="login-progress-bar"></div>
                </div>
                
                <button class="btn btn-secondary" onclick="showPage('home-page')" style="width: 100%; margin-top: 20px;">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
            </div>
        </div>
        
        <!-- 一卡通登录数字键盘 -->
        <div id="card-login-page" class="page">
            <div class="login-page">
                <h2>一卡通登录</h2>
                <p style="text-align: center; margin-bottom: 20px;">请输入一卡通号码</p>
                
                <div class="numpad-display" id="card-number-display">请输入卡号</div>
                
                <div class="numpad-container">
                    <button class="numpad-btn" onclick="appendNumber('1')">1</button>
                    <button class="numpad-btn" onclick="appendNumber('2')">2</button>
                    <button class="numpad-btn" onclick="appendNumber('3')">3</button>
                    <button class="numpad-btn" onclick="appendNumber('4')">4</button>
                    <button class="numpad-btn" onclick="appendNumber('5')">5</button>
                    <button class="numpad-btn" onclick="appendNumber('6')">6</button>
                    <button class="numpad-btn" onclick="appendNumber('7')">7</button>
                    <button class="numpad-btn" onclick="appendNumber('8')">8</button>
                    <button class="numpad-btn" onclick="appendNumber('9')">9</button>
                    <button class="numpad-btn" onclick="clearNumber()"><i class="fas fa-backspace"></i></button>
                    <button class="numpad-btn" onclick="appendNumber('0')">0</button>
                    <button class="numpad-btn" onclick="submitCardNumber()" style="background-color: var(--primary-color); color: white;">确认</button>
                </div>
                
                <button class="btn btn-secondary" onclick="showPage('login-page')" style="width: 100%; margin-top: 20px;">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
            </div>
        </div>
        
        <!-- 部门选择页 -->
        <div id="department-page" class="page">
            <header>
                <h1>请选择办理部门</h1>
                <div class="subtitle">请选择您要办理的业务部门</div>
            </header>
            
            <div class="department-list">
                <div class="department-item" onclick="selectDepartment('教务处')">
                    <div>
                        <h3>教务处</h3>
                        <p>学籍管理、成绩查询等</p>
                    </div>
                    <div class="waiting-number low">等待: 2人</div>
                </div>
                
                <div class="department-item" onclick="selectDepartment('学生处')">
                    <div>
                        <h3>学生处</h3>
                        <p>奖学金、助学金等</p>
                    </div>
                    <div class="waiting-number low">等待: 1人</div>
                </div>
                
                <div class="department-item" onclick="selectDepartment('财务处')">
                    <div>
                        <h3>财务处</h3>
                        <p>学费缴纳、发票打印等</p>
                    </div>
                    <div class="waiting-number medium">等待: 5人</div>
                </div>
                
                <div class="department-item" onclick="selectDepartment('后勤处')">
                    <div>
                        <h3>后勤处</h3>
                        <p>宿舍管理、校园卡等</p>
                    </div>
                    <div class="waiting-number low">等待: 0人</div>
                </div>
                
                <div class="department-item" onclick="selectDepartment('国际交流处')">
                    <div>
                        <h3>国际交流处</h3>
                        <p>留学申请、外事服务等</p>
                    </div>
                    <div class="waiting-number low">等待: 1人</div>
                </div>
                
                <div class="department-item" onclick="selectDepartment('图书馆')">
                    <div>
                        <h3>图书馆</h3>
                        <p>借阅证办理、图书查询等</p>
                    </div>
                    <div class="waiting-number low">等待: 1人</div>
                </div>
            </div>
            
            <button class="btn btn-secondary" onclick="showPage('home-page')" style="width: 100%; margin-top: 20px;">
                <i class="fas fa-arrow-left"></i> 返回首页
            </button>
        </div>
        
        <!-- 排队信息页 -->
        <div id="queue-info-page" class="page">
            <header>
                <h1 id="queue-dept-name">教务处 - 排队信息</h1>
                <div class="subtitle">当前排队情况</div>
            </header>
            
            <div class="queue-info">
                <div class="current-number">
                    <h2>当前办理号码</h2>
                    <span class="number">A025</span>
                    <p>3号窗口</p>
                </div>
                
                <h3>等待办理名单</h3>
                <div class="queue-list">
                    <div class="queue-item">
                        <span>A026</span>
                        <span>预计等待: 5分钟</span>
                    </div>
                    <div class="queue-item">
                        <span>A027</span>
                        <span>预计等待: 10分钟</span>
                    </div>
                    <div class="queue-item highlight">
                        <span>A028</span>
                        <span>您的号码</span>
                    </div>
                </div>
            </div>
            
            <div style="display: flex; gap: 10px;">
                <button class="btn" onclick="showPage('ticket-page')">
                    <i class="fas fa-print"></i> 确认取号
                </button>
                
                <button class="btn btn-secondary" onclick="showPage('department-page')">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
            </div>
        </div>
        
        <!-- 取号成功页 -->
        <div id="ticket-page" class="page">
            <header>
                <h1>取号成功</h1>
                <div class="subtitle">请妥善保管您的号码</div>
            </header>
            
            <div class="ticket">
                <h2>学校智能服务大厅</h2>
                <div class="ticket-info">
                    <div><strong>号码:</strong> <span id="ticket-number">A028</span></div>
                    <div><strong>部门:</strong> <span id="ticket-dept">教务处</span></div>
                    <div><strong>业务:</strong> 成绩查询</div>
                    <div><strong>前面等待:</strong> 2人</div>
                    <div><strong>预计等待:</strong> 10分钟</div>
                    <div><strong>取号时间:</strong> <span id="ticket-time">2023-11-15 10:25</span></div>
                </div>
                <p>请留意大屏幕叫号信息</p>
            </div>
            
            <div style="display: flex; gap: 10px;">
                <button class="btn" onclick="printTicket()">
                    <i class="fas fa-print"></i> 打印小票
                </button>
                
                <button class="btn btn-secondary" onclick="showPage('home-page')">
                    <i class="fas fa-home"></i> 返回首页
                </button>
            </div>
        </div>
        
        <!-- 临时建档页 -->
        <div id="temp-register-page" class="page">
            <header>
                <h1>临时人员建档</h1>
                <div class="subtitle">请填写您的信息</div>
            </header>
            
            <div class="form-group">
                <label for="id-number">身份证号码</label>
                <input type="text" id="id-number" placeholder="请输入18位身份证号码" maxlength="18">
            </div>
            
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" placeholder="请输入您的姓名">
            </div>
            
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" placeholder="请输入11位手机号码" maxlength="11">
            </div>
            
            <div class="form-group">
                <label for="visit-reason">来访事由</label>
                <input type="text" id="visit-reason" placeholder="请输入来访事由">
            </div>
            
            <button class="btn" onclick="submitTempRegister()">
                确认建档并取号
            </button>
            
            <button class="btn btn-secondary" onclick="showPage('home-page')" style="margin-top: 10px;">
                <i class="fas fa-times"></i> 取消返回
            </button>
        </div>
        
        <!-- 黑名单提示页 -->
        <div id="blacklist-page" class="page">
            <header>
                <h1>系统提示</h1>
                <div class="subtitle">操作受限通知</div>
            </header>
            
            <div class="warning-box">
                <h2><i class="fas fa-exclamation-triangle"></i> 线上预约权限已暂停</h2>
                <p>由于您有3次预约后未按时到达的记录，系统已暂停您的线上预约权限（有效期7天）。</p>
                <p>您仍可前往服务大厅使用线下取号功能办理业务。</p>
                <p>如有疑问，请联系服务大厅工作人员。</p>
                
                <a href="#" class="back-btn" onclick="showPage('home-page')">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>
        </div>
    </div>
    
    <script>
        // 当前用户信息
        let currentUser = null;
        let selectedDepartment = null;
        let voiceEnabled = true;
        let voiceVolume = 80;
        
        // 简单的页面切换功能
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示目标页面
            document.getElementById(pageId).classList.add('active');
            
            // 根据页面变化播放语音提示
            playPageVoice(pageId);
        }
        
        // 播放页面语音提示
        function playPageVoice(pageId) {
            if (!voiceEnabled) return;
            
            const messages = {
                'home-page': '欢迎使用学校智能服务大厅，请选择您需要的服务',
                'login-page': '请选择登录方式',
                'department-page': '请选择您要办理的业务部门',
                'queue-info-page': `当前排队情况，${selectedDepartment}当前办理号码A025，您的号码是A028，前面等待2人，预计等待时间10分钟`,
                'ticket-page': '取号成功，您的号码是A028，前面等待2人，预计等待时间10分钟，请妥善保管您的号码',
                'temp-register-page': '请填写临时人员信息',
                'blacklist-page': '系统提示，您的线上预约权限已暂停'
            };
            
            if (messages[pageId]) {
                speak(messages[pageId]);
            }
        }
        
        // 文本转语音
        function speak(text) {
            if (!voiceEnabled || !text) return;
            
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = 'zh-CN';
            utterance.volume = voiceVolume / 100;
            window.speechSynthesis.speak(utterance);
        }
        
        // 显示部门选择页
        function showDepartmentPage() {
            // 检查是否已登录
            if (!currentUser) {
                showPage('login-page');
                return;
            }
            
            showPage('department-page');
        }
        
        // 显示临时建档页
        function showTempRegisterPage() {
            // 临时人员不需要登录
            showPage('temp-register-page');
        }
        
        // 显示排队信息
        function showQueueInfo() {
            // 检查是否已登录
            if (!currentUser) {
                showPage('login-page');
                return;
            }
            
            showPage('queue-info-page');
        }
        
        // 选择部门
        function selectDepartment(dept) {
            selectedDepartment = dept;
            document.getElementById('queue-dept-name').textContent = `${dept} - 排队信息`;
            document.getElementById('ticket-dept').textContent = dept;
            showPage('queue-info-page');
        }
        
        // 使用指定方式登录
        function loginWithMethod(method) {
            const progressBar = document.getElementById('login-progress-bar');
            const progressContainer = document.getElementById('login-progress');
            
            progressContainer.style.display = 'block';
            progressBar.style.width = '0%';
            
            // 模拟登录过程
            let progress = 0;
            const interval = setInterval(() => {
                progress += 10;
                progressBar.style.width = `${progress}%`;
                
                if (progress >= 100) {
                    clearInterval(interval);
                    // 登录成功
                    currentUser = {
                        id: '123456',
                        name: '张三',
                        type: method === 'face' ? '学生' : '访客'
                    };
                    
                    // 根据登录方式显示不同提示
                    let methodName = '';
                    switch(method) {
                        case 'face': methodName = '人脸识别'; break;
                        case 'card': methodName = '一卡通'; break;
                        case 'id': methodName = '身份证'; break;
                        case 'auth': methodName = '统一认证'; break;
                    }
                    
                    speak(`登录成功，欢迎${currentUser.name}同学`);
                    showPage('department-page');
                }
            }, 200);
        }
        
        // 打印小票
        function printTicket() {
            // 更新取号时间
            const now = new Date();
            const timeString = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
            document.getElementById('ticket-time').textContent = timeString;
            
            // 播放语音提示
            speak('小票打印中，请稍候');
            
            // 模拟打印过程
            setTimeout(() => {
                alert('小票打印完成！');
                showPage('home-page');
            }, 1500);
        }
        
        // 提交临时建档信息
        function submitTempRegister() {
            const idNumber = document.getElementById('id-number').value;
            const name = document.getElementById('name').value;
            const phone = document.getElementById('phone').value;
            const reason = document.getElementById('visit-reason').value;
            
            if (!idNumber || !name || !phone || !reason) {
                alert('请填写完整信息');
                return;
            }
            
            // 验证身份证格式
            if (!/^\d{17}[\dXx]$/.test(idNumber)) {
                alert('请输入有效的18位身份证号码');
                return;
            }
            
            // 验证手机号格式
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入有效的11位手机号码');
                return;
            }
            
            // 创建临时用户
            currentUser = {
                id: idNumber,
                name: name,
                phone: phone,
                type: '临时访客',
                reason: reason
            };
            
            speak(`临时建档成功，欢迎${name}先生/女士`);
            showPage('department-page');
        }
        
        // 数字键盘功能
        let cardNumber = '';
        
        function appendNumber(num) {
            cardNumber += num;
            updateCardDisplay();
        }
        
        function clearNumber() {
            cardNumber = cardNumber.slice(0, -1);
            updateCardDisplay();
        }
        
        function updateCardDisplay() {
            const display = document.getElementById('card-number-display');
            display.textContent = cardNumber || '请输入卡号';
            display.style.color = cardNumber ? '#333' : '#999';
        }
        
        function submitCardNumber() {
            if (!cardNumber) {
                alert('请输入一卡通号码');
                return;
            }
            
            // 模拟验证过程
            document.getElementById('login-progress').style.display = 'block';
            const progressBar = document.getElementById('login-progress-bar');
            progressBar.style.width = '0%';
            
            let progress = 0;
            const interval = setInterval(() => {
                progress += 10;
                progressBar.style.width = `${progress}%`;
                
                if (progress >= 100) {
                    clearInterval(interval);
                    // 登录成功
                    currentUser = {
                        id: cardNumber,
                        name: '李四',
                        type: '学生'
                    };
                    
                    speak(`登录成功，欢迎${currentUser.name}同学`);
                    showPage('department-page');
                    cardNumber = '';
                    updateCardDisplay();
                }
            }, 200);
        }
        
        // 语音提示设置
        function toggleVoiceModal() {
            const modal = document.getElementById('voice-modal');
            modal.classList.toggle('active');
        }
        
        function closeVoiceModal() {
            document.getElementById('voice-modal').classList.remove('active');
        }
        
        function testVoice() {
            speak('这是语音提示测试，当前音量设置测试');
        }
        
        // 监听语音设置变化
        document.getElementById('voice-enabled').addEventListener('change', function() {
            voiceEnabled = this.checked;
            document.getElementById('voice-btn').classList.toggle('active', !voiceEnabled);
        });
        
        document.getElementById('voice-volume').addEventListener('input', function() {
            voiceVolume = this.value;
        });
        
        // 初始化语音按钮状态
        document.getElementById('voice-enabled').checked = voiceEnabled;
        document.getElementById('voice-volume').value = voiceVolume;
        
        // 页面加载时播放欢迎语音
        window.addEventListener('load', function() {
            setTimeout(() => {
                speak('欢迎使用学校智能服务大厅自助叫号系统');
            }, 500);
        });
    </script>
</body>
</html>